<template>
    <el-dialog :visible.sync="is_form_show" :before-close="handleClose">
        <el-form ref="auth_form" :model="auth_form" label-width="200px" :rules="rules">
            <el-form-item label="基础模块：">
                <el-radio-group v-model="auth_form.isModule">
                    <el-radio-button :label="1">是</el-radio-button>
                    <el-radio-button :label="0">否</el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="模块logo：">
                <img class="upload-img" :src="img_file_path" alt="模块logo" @click="selectImg">
                <input type="file" @change="changeImgPath" style="display:none;">
            </el-form-item>
            <el-form-item label="权限名称：" prop="name">
                <el-input v-model="auth_form.name"></el-input>
            </el-form-item>
            <el-form-item label="备注：">
                <el-input type="textarea" v-model="auth_form.remark"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="onSubmit('auth_form')">确定</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script>
import getImg from "@/tool/getimgpath.js";
import upload from "@/tool/upload.js";

import authcreate from "@/api/auth_create.js";

export default {
    name: "auth-form",
    props: ["form", "is_form_show", "pid", "is_create", "parent_id"],
    data() {
        return {
            auth_form: {
                name: undefined,
                remark: "",
                isModule: undefined,
                logo: undefined
            },
            rules: {
                name: [
                    {
                        required: true,
                        message: "必填项"
                    }
                ]
            },
            img_file_path: undefined,
            img_file: undefined
        };
    },
    methods: {
        handleClose() {
            this.auth_form.name = undefined;
            this.auth_form.remark = undefined;
            this.auth_form.isModule = undefined;
            this.auth_form.logo = undefined;
            this.img_file_path = undefined;
            this.img_file = undefined;
            document.querySelector("input[type=file]").value = "";
            this.$emit("changeFormShow", false);
        },
        selectImg() {
            document.querySelector("input[type=file]").click();
        },
        changeImgPath(ev) {
            this.img_file_path = getImg(ev.target.files[0]);
            this.img_file = ev.target.files[0];
        },
        onSubmit(formName) {
            this.$refs[formName].validate(async valid => {
                if (valid) {
                    if (this.img_file) {
                        await upload(this.img_file).then(res => {
                            this.auth_form.logo = res;
                        });
                    } else {
                        this.auth_form.logo = this.auth_form.logo || "";
                    }
                    if (this.is_create) {
                        this.auth_form.pid = this.pid || 0;
                        authcreate
                            .createAuth(this.auth_form)
                            .then(res => {
                                this.$message({
                                    type: "success",
                                    message: "创建成功!"
                                });
                                this.handleClose();
                                this.$store.dispatch(
                                        "authcreate/getAuthTree"
                                    );
                                this.$store.dispatch(
                                    "authcreate/changeIsAuthDetailShow",
                                    { show: false }
                                );
                            })
                            .catch(err => {
                                this.$message.error(err);
                                this.handleClose();
                            });
                    } else {
                        this.auth_form.id = this.pid;
                        this.auth_form.pid = this.parent_id;
                        authcreate
                            .editAuth(this.auth_form)
                            .then(res => {
                                this.$message({
                                    type: "success",
                                    message: "编辑成功!"
                                });
                                this.$store.dispatch(
                                    "authcreate/changeIsAuthDetailShow",
                                    { show: false }
                                );
                                this.handleClose();
                                this.$store.dispatch(
                                        "authcreate/getAuthTree"
                                    );
                            })
                            .catch(err => {
                                this.$message.error(err);
                                this.handleClose();
                            });
                    }
                } else {
                    return false;
                }
            });
        }
    },
    watch: {
        "auth_form.logo"(newVal) {
            this.img_file_path = newVal;
        },
        form(newVal) {
            this.auth_form = newVal;
            this.img_file_path = this.auth_form.logo;
            this.img_file = undefined;
        },
        is_create(newVal) {
            if (newVal) {
                this.auth_form = {
                    name: undefined,
                    remark: "",
                    isModule: undefined,
                    logo: undefined
                };
                this.img_file_path = undefined;
                this.img_file = undefined;
            }
        }
    }
};
</script>

<style>
</style>
